<template>
	<el-tabs type="border-card" class="m-t-20">   
	  	<el-tab-pane label="基本信息">
	  		<el-col class="flex-row">
				<img :src="basicForm.LogoURL" class="company-logo" />
				<span class="company-name">{{basicForm.Info.CompanyName}}</span>
			</el-col>
			
			<el-form ref="basicForm" :model="basicForm" label-width="130px">
			  	<el-form-item label="工商信息">
		  		    <el-col :span="5">
		  		    	<a :href="basicForm.H5Link" target="_blank" class="qichacha">
			        		<img src="http://www.yqt360.com/static/images/company/qichacha.png" width="20px" />
			        		企查查
			        	</a>
		  		    	<!--<el-input v-model="basicForm.H5Link"></el-input>-->
				    </el-col>
				    <el-col :span="3" class="label-txt">社会信用代码</el-col>
				    <el-col :span="5">
				    	<el-input v-model="basicForm.Info.RegNumber" disabled></el-input>
				    </el-col>
				    <el-col :span="3" class="label-txt">法人代表</el-col>
				    <el-col :span="5">
				    	<el-input v-model="basicForm.Info.LegalPersonName" disabled></el-input>
				    </el-col>
			  	</el-form-item>
			  	<el-form-item label="经营状态">
			  		<el-col :span="5">
			  			<el-input v-model="basicForm.Info.RegStatus"></el-input>
				    </el-col>
				    <el-col :span="3" class="label-txt">注册时间</el-col>
				    <el-col :span="5">
						<el-date-picker v-model="basicForm.Info.EstablishTime" type="date" placeholder="选择日期" clearable @change="fnSetEstablishTime"></el-date-picker>
				    </el-col>
				    <el-col :span="3" class="label-txt">注册资本</el-col>
				    <el-col :span="5">
				    	<el-input v-model="basicForm.Info.RegCapital"></el-input>
				    </el-col>
			  	</el-form-item>
			  	
			  	<el-col class="line b-b line-lg pull-in"></el-col>
			  	
			  	<el-form-item label="省市区">
	  	    		<el-cascader placeholder="请选择省市区" change-on-select clearable expand-trigger="click" :props="props" :options="provincialCity" v-model="selectedCity"></el-cascader>
				</el-form-item>
		  	    
		  	    <el-form-item label="经营地址">
		  	    	<el-col :span="13">
		  	    		<el-input v-model="basicForm.Info.RegLocation"></el-input>
		  	    	</el-col>
		  	    	<el-col :span="6" class="m-l-18 m-r-6">
		  	    		<el-select v-model="basicForm.Info.OpAddress" placeholder="请选择">
					    	<el-option v-for="item in opAddressList" :key="item.val" :label="item.label" :value="item.val">
							</el-option>
		  	    		</el-select>
		  	    	</el-col>
		  	    	<el-col :span="2">
		  	    		<el-button type="warning">刷新GPS</el-button>
		  	    	</el-col>
			  	</el-form-item>
			  	
			  	<el-col class="line b-b line-lg pull-in"></el-col>
			  	
			  	<el-form-item label="联系人名片" v-show="basicForm.Contact.Namecard">
			  		<el-col :span="7">
			  			<img :src="basicForm.Contact.Namecard" class="name-card" />
			  			<!--<el-dialog v-model="dialogVisible" size="tiny">
						  	<img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>-->
			  		</el-col>
			  		<!--<el-col :span="3">
			  			<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
							<el-button type="primary">点击上传名片</el-button>
						</el-upload>
			  		</el-col>-->
			  	</el-form-item>
			  	
			  	<el-form-item label="联系人姓名">
		  		    <el-col :span="5">
		  		    	<el-input v-model="basicForm.Contact.Name"></el-input>
				    </el-col>
				    <el-col :span="3" class="label-txt">联系人电话</el-col>
				    <el-col :span="5">
				    	<el-input v-model="basicForm.Contact.Mobile"></el-input>
				    </el-col>
				    <el-col :span="3" class="label-txt">联系人职务</el-col>
				    <el-col :span="5">
				    	<el-input v-model="basicForm.Contact.Title"></el-input>
				    </el-col>
			  	</el-form-item>
			  	
			  	<el-form-item label="联系人备注">
			  		<el-col :span="22">
			  			<el-input type="textarea" :rows="3" placeholder="请输入联系人备注" v-model="basicForm.Contact.Remark"></el-input>
			  		</el-col>
			  	</el-form-item>
			  	
			  	<el-col class="line b-b line-lg pull-in"></el-col>
			  	
			  	<el-form-item label="推荐人姓名">
		  		    <el-col :span="9">
		  		    	<el-input v-model="basicForm.Ext.Reference"></el-input>
				    </el-col>
				    <el-col :span="3" class="label-txt m-l-19">推荐人电话</el-col>
				    <el-col :span="9">
				    	<el-input v-model="basicForm.Ext.ReferencePhone"></el-input>
				    </el-col>
			  	</el-form-item>
			  	
			  	<el-form-item label="推荐人备注">
			  		<el-col :span="22">
			  			<el-input type="textarea" :rows="3" placeholder="请输入推荐人备注" v-model="basicForm.Ext.ReferenceRemark"></el-input>
			  		</el-col>
			  	</el-form-item>
			  	
			  	<el-form-item>
			  		<el-button type="primary" @click.native="fnSaveUpdate">保存更新</el-button>
			  		<el-button @click="fnBack">返回</el-button>
		  		</el-form-item>
			  	
			</el-form>
			
	  	</el-tab-pane>
	  	<el-tab-pane label="公司介绍">公司介绍</el-tab-pane>
	  	<el-tab-pane label="跟进记录">跟进记录</el-tab-pane>
	</el-tabs>
</template>

<script>
    import Svc from '../../service/index.js'
	export default {
		data() {
			return {
				//当前公司ID
				companyID : 0,
				//配置省市区数据
		        props: {
		          	value: 'Name',
		          	label: 'Name',
		          	children: 'Cities'
		        },
		        //省市区数据
				provincialCity:[],
				//选择的省市区
		        selectedCity:[],
		        //上传名片
                dialogImageUrl: '',
        		dialogVisible: false,
        		//注册地址与经营地址是否相符
        		opAddressList : [{
        			label:'暂无法判断',
        			val:0
        		},{
        			label:'与注册地址相符',
        			val:1
        		},{
        			label:'与注册地址不相符',
        			val:2
        		}],
        		//基本信息
				basicForm : {
					AllCerts:[],
					Contact:{},
					Ext:{},
					Info:{}
				}
			}
		},
		methods: {
			//显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
            //获取当前注册时间
            fnSetEstablishTime : function(val){
            	this.basicForm.Info.EstablishTime = val;
            },
			//获取省市区列表
			fnGetProvincialCity : function() {
				var that = this
				var provCity = sessionStorage.getItem('provincialCity');
				if (provCity) {
					that.provincialCity = JSON.parse(provCity)
				} else {
					//获取省市区列表
		            Svc.fnGetData('/api/common/cities',{},function(res){
		            	if (res.body.ErrCode == 0){
		            		//将Districts替换为Cities
		            		var data = res.body.Data || []
		            		for (var i = 0; i < data.length; i++) {
		            			var temp = data[i]
		            			if (temp.Cities.length > 0) {
		            				for (var j=0;j<temp.Cities.length;j++) {
			            				var item = temp.Cities[j]
			            				item.Cities = item.Districts
		            					delete item.Districts
			            			}
		            			}
		            		}
		            		//保存省市区列表
		            		that.provincialCity = data
		            		sessionStorage.setItem('provincialCity', JSON.stringify(data));
		            	} else {
		            		that.openMessage('省市区列表获取失败！',"error")
		            	}
		            },function(res){
		            	that.openMessage('网络错误，请重新！',"error")
		            }) 
				}
			},
			//获取基本信息
			fnGetBasic : function(){
				var that = this
	            Svc.fnGetData('/api/corp/detail/basic/'+that.companyID,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.basicForm = res.body.Data
	            		that.selectedCity.push(res.body.Data.Info.Province)
	            		that.selectedCity.push(res.body.Data.Info.City)
	            		that.selectedCity.push(res.body.Data.Info.District)
	            	} else {
	            		that.openMessage('公司基本信息获取失败',"error")
	            	}
	            },function(res){
	            	that.openMessage('网络错误，请重新！',"error")
	            }) 
			},
			//保存更新
			fnSaveUpdate : function(){
				var that = this
				// ContactNamecard 名片
				var params = {
					CompanyID : that.companyID,
					RegStatus : that.basicForm.Info.RegStatus,
					StartDate : that.basicForm.Info.EstablishTime,
					RegCapital : that.basicForm.Info.RegCapital,
					RegLocation : that.basicForm.Info.RegLocation,
					OpAddressStatus : that.basicForm.Info.OpAddress,
					ContactID : that.basicForm.Contact.ID,
					ContactPerson : that.basicForm.Contact.Name,
					ContactPhone : that.basicForm.Contact.Mobile,
					ContactTitle : that.basicForm.Contact.Title,
					ContactRemark : that.basicForm.Contact.Remark,
					Reference : that.basicForm.Ext.Reference,
					ReferencePhone : that.basicForm.Ext.ReferencePhone,
					ReferenceRemark : that.basicForm.Ext.ReferenceRemark
				}
				
				//格式化省市区
				if (that.selectedCity.length == 1) {
					params.Province = that.selectedCity[0]
				} else if (that.selectedCity.length == 2) {
					params.Province = that.selectedCity[0]
					params.City = that.selectedCity[1]
				} else if (that.selectedCity.length == 3) {
					params.Province = that.selectedCity[0]
					params.City = that.selectedCity[1]
					params.District = that.selectedCity[2]
				}

	            Svc.fnPostData('/api/corp/detail/update',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.openMessage('公司信息更新成功！','success')
//	            		setTimeout(function () {
//		         			//刷新当前组件
//          				that.$router.go(0)
//			          	},1500);
	            	} else {
	            		that.openMessage(res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
			},
            //返回
            fnBack : function(){
            	this.$router.go(-1)
            }
		},
		mounted() {
			var that = this
			//设置初始值
			that.companyID = parseInt(that.$route.query.companyID);
			//获取省市区列表
			that.fnGetProvincialCity()
			//获取基本信息
			that.fnGetBasic()
		}
	}

</script>

<style scoped>
	.m-t-20{
		margin-top: 20px;
	}
	
	.m-l-18{
		margin-left: 18px;
	}
	
	.m-l-19{
		margin-left: 19px;
	}
	
	.m-r-6{
		margin-right: 8px;
	}

	.flex-row {
	    /*padding: 10px;
	    margin: 10px 0;*/
	    display: flex;
    	flex-direction: row;
   	    align-items: center;
   	    height: 60px;
        margin-bottom: 25px;
    	padding-left: 60px;
	}
	
	.company-logo{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 15px;
	}
	
	.company-name {
		font-size: 24px;
		letter-spacing: 1px;
	}
	
	.label-txt {
	    text-align: right;
    	margin-right: 19px;
	}
	
	.qichacha{
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    text-decoration: none;
	}
	
	.qichacha img{
		margin-right: 5px;
	}
	
	/*分割线 start*/
	.line {
	    height: 2px;
	    font-size: 0;
	    overflow: hidden;
	}
	.b-b {
	    border-bottom: 1px dashed #ddd;
	}
	.line-lg {
	    margin-bottom: 20px;
	}
	/*分割线 end*/
	
	.name-card {
	    width: 250px;
	    height: 150px;
	    border-radius: 8px;
	}
</style>